import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaSelect, WeaLocaleProvider } from 'ecCom';
import { Icon, Menu, Dropdown } from 'antd';

const MenuItem = Menu.Item;
const getLabel = WeaLocaleProvider.getLabel;

@inject('docDetailFormStore')
@observer
class DataListItem extends React.PureComponent {
	openFullWindowForXtable = () => {
		const { record: { filelink } } = this.props;
		window.openFullWindowForXtable(filelink);
	}
	onClick = () => {
		const { onOperatesClick, record, index } = this.props;
		if (typeof onOperatesClick === 'function') onOperatesClick(record, index, '', '2');
	}
	onChangeSelect = (v, showname) => {
		const { docDetailFormStore, record: { fileid } } = this.props;
		docDetailFormStore.mainfileLocal = v;
		this.setState({ value: v });
		docDetailFormStore.setMainImagefile(fileid);
	}
	doDelete = () => {
		const { doDelete, record } = this.props;
		if (typeof doDelete === 'function') doDelete(record.fileid);
	}
	open = () => {
		const { record } = this.props;
		open(record.loadlink);
	}
	getMenu = () => {
		const { record } = this.props;
		const menu = (
			<Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@jehw6r@delete`}>
				<MenuItem ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@1wnx8m@delete`}>
					<a href="javascript:void(0);" onClick={this.doDelete}>{getLabel(91, '删除')}</a>
				</MenuItem>
				<MenuItem ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@bp24jb@download`}>
					<a href="javascript:void(0);" onClick={this.open} >{getLabel(31156, '下载')}</a>
				</MenuItem>
				{ record.versionCounts && record.versionCounts != '0' &&
					<MenuItem ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@6q8aig@openVersion`}>
						<a href="javascript:void(0);"
							onClick={this.onClick}
						>{getLabel(16384, '打开版本')}</a>
					</MenuItem>
				}
			</Menu>
		);
		return (
			<div className="wea-table-edit-ismodal-ops">
				<Dropdown ecId={`${this && this.props && this.props.ecId || ''}_Dropdown@r3i5pa@$wea-table-edit-ismodal-ops`} overlay={menu}>
					<span style={{ cursor: 'pointer' }}>
						{getLabel(30585, '操作')}
						<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@b08v5s@caret-down`} style={{ marginLeft: 5, color: '#999' }} type="caret-down" />
					</span>
				</Dropdown>
			</div>
		);
	}
  render() {
		const { docDetailFormStore, record: { versionCounts = 0, filename, isMainFile }, text, index, dataListItemKey } = this.props;
		if (dataListItemKey === "mainFile") {
			return (
				<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@4rqxoo@${text}`}
          options={[
            {
              key: `${index}`,
              selected: isMainFile == '1',
              showname: '',
            },
          ]}
          value={docDetailFormStore.mainfileLocal}
          detailtype={3}
					supportCancel
					onChange={this.onChangeSelect}
        />
			);
		} else if (dataListItemKey === "opsMenu") {
			return this.getMenu();
		}
 		return (
			<span>
				<a className="titleA" onClick={this.openFullWindowForXtable} target="_blank">
					{filename}
				</a>
				{versionCounts != 0 &&
					<span>
						(
					<span
						style={{ color: '#30B5FF', display: 'inline-block', verticalAlign: 'middle', cursor: 'pointer' }}
						onClick={this.onClick}
					>
							V{versionCounts}
						</span>
						)
				</span>
				}
			</span>
		)
	}
}

export default DataListItem;
